<template>
  <div class="createorder">
    <LoadingGroup :error="error" :pending="pending">
      <n-card>
        <h4 class="mb-5">产品信息</h4>
        <div class="flex mb-5">
          <n-image :class="[type === 'book' ? 'w-[100px] h-[140px]' : 'w-[180px] h-[100px]']" :src="data.cover"
                   class="rounded flex-shrink-0 "
          ></n-image>
          <div class="flex flex-col flex-1 ml-4">
            <h5 class="flex text-gray-600 text-xl">
              {{ data.title }}
              <Price :value="data.price" class="ml-auto"/>
            </h5>
            <div v-if="type === 'course'" class="mt-auto">
              <n-tag :bordered="false" size="small">{{ o[data.type] }}</n-tag>
            </div>
          </div>
        </div>

        <h4 class="">优惠价{{ couponData.count }}</h4>
        <n-grid :cols="4" :x-gap="20" class="mb-3">
          <n-grid-item v-for="(item,index) in couponData.rows" :key="index">
            <n-button :type="user_coupon_id === item.id ? 'warning':'tertiary'" secondary strong
                      @click="chooseCoupon(item)">
              ¥{{ item.price }} 优惠卷
            </n-button>
          </n-grid-item>
        </n-grid>
        <div v-if="Number(couponData.count) === 0" class="text-gray-400 text-sm mb-5">
          暂无优惠券
        </div>


        <h4>支付方式</h4>
        <div class="mb-5 flex ">
        <span class="wxpay">
        <n-icon>
          <LogoWechat/>
        </n-icon>
        <b>微信支付</b>
        </span>
        </div>

        <div class="flex items-center mb-5">
          <small class="text-red-500  mr-auto">请在30分钟内完成支付</small>
          <span v-if="user_coupon_id">优惠卷已抵扣
            <b class="text-red-500">{{ coupon_price }}元</b>
          </span>
          <span>需支付
         <Price :value="price" class="ml-auto"/>

          </span>
        </div>

        <div class="flex justify-end">
          <n-button :loading="loading" type="primary" @click="submit">确认支付</n-button>
        </div>
      </n-card>
    </LoadingGroup>

  </div>
</template>

<script setup>
import {NButton, NCard, NGrid, NGridItem, NIcon, NImage, NTag} from "naive-ui"
import {LogoWechat} from "@vicons/ionicons5"
import {computed} from "vue";
import {useGetUseableUserCouponApi} from "~/apis/order.js";

const route = useRoute();

const {id, type} = route.query;

const o = {
  'media': '图文',
  'audio': '音频',
  'video': '视频',
  'column': '专栏',
  'book': '电子书',
  'course': '课程',
}

// 获取产品信息
const {data, error, pending} = await useGetGoodsInfoApi(id, type);


// 获取可用优惠卷
const {data: couponData} = await useGetUseableUserCouponApi(id, type);

// console.log(couponData.value);

// 获取订单
const loading = ref(false)
const submit = async () => {
  loading.value = true;

  let d = {}

  if (type === 'course' || type === 'column' || type === 'book') {
    d = {
      goods_id: data.value.id,
      type
    }
    if (user_coupon_id.value) {
      d.user_coupon_id = user_coupon_id.value;
    }
  } else if (type === 'flashsale') {
    d = {
      flashsale_id: id
    }
  }

  const {error: CreateOrderError, data: CreateOrderResult} = await useCreateOrderApi(d, type)
  loading.value = false;
  if (CreateOrderError.value) return

  navigateTo(`/pay?no=${CreateOrderResult.value.no}`, {replace: true})


}


// 选中优惠卷
const user_coupon_id = ref(0);
const chooseCoupon = (item) => {
  user_coupon_id.value = user_coupon_id.value === item.id ? 0 : item.id;
}

// 计算优惠卷价格
const coupon_price = computed(() => {
  if (Number(user_coupon_id.value) === 0) return 0;
  let c = couponData.value.rows.find((o) => Number(o.id) === Number(user_coupon_id.value));
  return c ? c.price : 0;
})

// 最终价格
const price = computed(() => {
  let p = ((data.value.price * 1000 - coupon_price.value * 1000) / 1000).toFixed(2);
  return p <= 0 ? 0 : p;
});


definePageMeta({
  middleware: ['auth', 'createorder']
})
</script>

<style lang="css">
.createorder {
  @apply mb-5;
}

.createorder h4 {
  @apply font-semibold mb-3 text-gray-600;
}

.createorder .wxpay {
  @apply flex items-center justify-center border border-green-500 rounded py-3 text-sm text-green-600 w-[120px];
}
</style>

